{#
 Annotations
 #}

<style>
.hide-title {
    opacity: 0.5;
}
.hide-title:hover {
    opacity: 1;
}
.hide-title input {
    position: relative;
    top: -2px;
}
</style>

 <div class="vis-option-type-group group-open">
     <label class="group-title">
     	<i class="fa fa-chevron-up expand-group pull-right"></i>
        <i class="fa fa-chevron-down collapse-group pull-right"></i>
     	{% trans "annotate / title" %}</label>
     <div class="option-group-content vis-option-type-chart-description">
         <div class="story-title control-group">
             <div style="position:relative">
                <label class="hide-title" style="display: block;position: absolute;right: 0;top: 0;font-size: 12px;color: #777;" class="checkbox">
                    <input id="hide-title" type="checkbox">&nbsp;{% trans "annotate / hide-title" %}
                </label>
                 <label class="control-label" for="text-title">{% trans "Title" %}</label>
                 <input type="text" id="text-title" class="input-xlarge span4" />

                 <label class="control-label" for="text-intro">{% trans "Description" %}</label>
                 <textarea type="text" id="text-intro" class="input-xlarge span4"></textarea>

                 <label class="control-label" for="text-notes">{% trans "Notes" %}</label>
                 <input type="text" id="text-notes" class="input-xlarge span4" />
             </div>

             <div class="row">
                 <div class="span2">
                     <label class="control-label">{% trans "Source name" %}</label>
                     <input {% if chart.isFork %}disabled{% endif %} id="describe-source-name" type="text" class="span2" placeholder="{% trans "name of the organisation" %}">
                 </div>
                 <div class="span2">
                     <label class="control-label">{% trans "Source URL" %}</label>
                     <input {% if chart.isFork %}disabled{% endif %} id="describe-source-url" type="text" class="span2" placeholder="{% trans "URL of the dataset" %}">
                 </div>
             </div>

             <div class="chart-byline">
                <label class="control-label">{% trans "visualize / annotate / byline" %}</label>
                <input id="describe-byline" type="text" class="input-xlarge span4" placeholder="{% trans "visualize / annotate / byline / placeholder" %}">
            </div>
         </div>
     </div>

 </div>

{{ hook('custom_annotation_controls', chart) }}

 {% if vis.annotate_options %}

     {% for key, option in vis.annotate_options %}
         {% if option.type == 'group' %}
         <div id="vis-options-{{ key }}" data-group-key="{{ key }}" class="vis-option-type-group{% if option.open %} group-open{% endif %}">
             <label class="group-title">
                {{ option.label|raw }}
                <i class="fa fa-chevron-up expand-group pull-right"></i>
                <i class="fa fa-chevron-down collapse-group pull-right"></i>
            </label>
             <div class="option-group-content">
             {% for key, option in option.options %}
             {{ block('option') }}
             {% endfor %}
             </div>
         </div>
         {% else %}
         {{ block('option') }}
         {% endif %}
     {% endfor %}
{% else %}

    <div class="vis-option-type-group group-open">
        <label class="group-title">
            {% trans "annotate / highlight element" %}
            <i class="fa fa-chevron-up expand-group pull-right"></i>
            <i class="fa fa-chevron-down collapse-group pull-right"></i>
        </label>
        <div class="option-group-content highlight-elements">
            {{ svelte('highlight', {'chart': chart }) }}
        </div>
    </div>

{% endif %}


{% block option %}
    {% if theme['option-filter'][vis.id][key] or (not option.hidden and not option.expert) %}
        <div class="control-group vis-option-group vis-option-type-{{ option.type }}{% if option.inline %} inline{% endif %}" id="vis-options-{{ key }}">

        {% if option.help %}
            <a title="{{ option.help }}" class="vis-option-help"><span>?</span></a>
        {% endif %}

        {{ hook('vis_option_controls', option, key) }}

        </div>
    {% endif %}
{% endblock %}
